<template>
	<view class="module_img_list" :style="{ width: `${width}rpx` }">
		<view class="module_img" v-for="(_img, current) in imgList" :key="current" :style="{ margin: `${margin}rpx` }">
			<myimg
				:imgsrc="_img"
				:width="img_width"
				:radius="radius"
				:mode="mode"
				:urls="imgList"
				:current="current"
				:showclose="showclose"
				@closeClick="closeClick($event)"
				@imgClick="imgClick($event)"
			></myimg>
		</view>
	</view>
</template>

<script>
import storeMixin from '@/store/storeMixin';
export default {
	mixins: [storeMixin],
	name: 'myImgList',
	props: {
		urls: {
			type: [Array, String],
			default() {
				return '';
			},
		},
		urls_split: {
			type: [String],
			default: ',',
		},
		showclose: {
			type: [Boolean],
			default: false,
		},
		width: {
			type: [Number, String],
			default: '100',
		},
		number: {
			type: [Number, String],
			default: 3,
		},
		radius: {
			type: [Number, String],
			default: '0',
		},
		mode: {
			type: [String],
			default: 'aspectFill',
		},
		margin: {
			type: [Number, String],
			default: '10',
		},
	},

	data() {
		return {
			imgList: [],
			list_width: 0,
			img_width: 0,
		};
	},
	created() {},
	mounted() {},
	computed: {
		// module_style() {
		// 	let style = {};
		// 	if (this.width > 0) {
		// 		style['width'] = `${this.width}rpx`;
		// 	}
		// 	if (this.height > 0) {
		// 		style['height'] = `${this.height}rpx`;
		// 	} else {
		// 		style['height'] = `${this.width}rpx`;
		// 	}
		// 	if (this.radius > 0) {
		// 		style['border-radius'] = `${this.radius}rpx`;
		// 	}
		// 	return style;
		// },
	},
	methods: {
		// ...common,
		imgClick(event) {
			let _this = this;
			_this.$emit('imgClick', event);
		},
		closeClick(event) {
			let _this = this;
			let { urls, current } = event;
			urls.splice(current, 1);
			let STR = urls.join(_this.urls_split);
			_this.$emit('closeClick', STR);
		},

		initImgList() {
			let _this = this;
			if (_this.objJudge(_this.urls)) {
				_this.imgList = _this.urls.split(_this.urls_split);
			} else {
				_this.imgList = [];
				return;
			}
			_this.img_width = _this.width / _this.number - _this.margin * 2;
		},
	},
	watch: {
		urls: {
			handler(newVal) {
				this.initImgList();
			},
			immediate: true,
		},
	},
};
</script>

<style lang="scss">
.module_img_list {
	position: relative;
	display: flex;
	flex-wrap: wrap;
}
</style>
